import React, { Component } from "react";
import { connect } from "react-redux";
import { actions } from "./_index";
/*
一、界面：
三块内容：
1、第一块内容为仅添加
2、第二块
  添加空表单或编辑有内容表单
3、表单保存成功后的列表显示
二、功能开发 事件 界面切换
对应添加点击（添加、编辑、保存）
可以实现界面切换
三、业务开发
1、表单可以实现双向数据绑定
2、空白点击表单保存 数据push 到数组里
3、并且切换到显示页面
4、显示界面使用数组里的数据进行map 循环
5、可以继续添加空白表单
-------
修改（item,index）
表单数据是obj，不是arr
把表单的obj改成要改的那一条
this.setState({
  obj:item
})
--------
保存 分两种情况
1、首次添加保存
push
2、编辑保存
根据已知下标替换

-------------
1、命名
2、开发流程 业务逻辑

推荐名师
wk_hd
tj_l
tj_c
tj_r

tj_hd
tj_bd
tj_ft

onGetfn
loginCfg
loginApi
loginData

data
_data

tab缩进 4
*/
class index extends Component {
  constructor() {
    super();
    this.state = {
      isShow: "before",
      yeji: "",
      resume: {
        name: { company: "", work: "" },
        time: {
          startYear: "",
          startMonth: "",
          overYear: "",
          overMonth: "",
        },
        guan: {
          checked: false,
          people: "",
          peopleNum: "",
          des: "",
          month: "",
          year: "",
          passage: "",
          produce: "",
          sales: "",
          method: "",
        },
        more: {
          checked: false,
          more: "",
        },
      },
      resumes: [],
      index: "",
    };
    this.setShow = this.setShow.bind(this);
    this.setVal = this.setVal.bind(this);
    // this.edit = this.setVal.edit(this);
  }
  setShow(isShow) {
    this.setState({
      isShow,
    });
  }
  componentDidMount() {
    const { list } = this.props.three.action;
    if (list.length > 0) {
      this.setShow("finish");
      this.setState({
        resumes: list,
      });
    } else {
      const { getData } = this.props;
      getData("初始", []);
    }
  }
  setVal({ target }) {
    const { name, value, checked, type } = target;
    const { resume } = this.state;
    const own = target.getAttribute("own");
    resume[own][name] = value;
    if (type === "checkbox") {
      resume[own][name] = checked;
    }
    this.setState({
      resume,
    });
  }
  del(index) {
    const { resumes } = this.state;
    const { getData } = this.props;
    resumes.splice(index, 1);
    getData("添加", resumes);
    this.setState({
      resumes,
    });
    if (resumes.length === 0) {
      this.setShow("before");
    }
  }
  lists() {
    const { resumes, yeji } = this.state;

    const { three } = this.props;
    console.log(three.action.list);
    return three.action.list.map((val, index) => {
      return (
        <li key={index}>
          <div className="finish_left">
            <span>{val.name.company}</span>
            <i>-</i>
            <span>{val.name.work}</span>
          </div>
          <div className={`finish_warn ${yeji}`}>
            销售业绩尚未填写！
            <span onClick={() => this.setShow("edit")}>立即填写</span>
          </div>
          <div className="finish_right">
            <span onClick={() => this.edit(val, index)}>编辑</span>
            <span onClick={() => this.del(index)}>删除</span>
          </div>
        </li>
      );
    });
  }
  edit(val, index) {
    this.setShow("edit");
    this.setState({
      resume: val,
      index,
    });
  }
  sure() {
    const { resumes, resume, index } = this.state;
    const { company, work } = resume.name;
    const { three, getData } = this.props;
    const { startYear, overYear, startMonth, overMonth } = resume.time;
    const { month, year, passage, produce, sales, method } = resume.guan;
    if (!company) {
      return alert("公司名称没有填写");
    }
    if (!work) {
      return alert("职位名称没有填写");
    }
    if (!startYear) {
      return alert("请选择开始年份");
    }
    if (!overYear) {
      return alert("请选择结束年份");
    }
    if (!startMonth) {
      return alert("请选择开始月份");
    }
    if (!overMonth) {
      return alert("请选择结束月份");
    }
    // if (
    //   month === "" ||
    //   year === "" ||
    //   method === "" ||
    //   passage === "" ||
    //   produce === "" ||
    //   sales === ""
    // ) {
    //   this.setState({
    //     yeji: "",
    //   });
    // } else {
    //   this.setState({
    //     yeji: "yeji",
    //   });
    // }
    // const resumes = resumes;
    // const resume = resume;
    if (index !== "") {
      if (index >= 0) {
        resumes[index] = resume;
      }
    } else {
      resumes.push(resume);
    }
    getData("添加", resumes);
    this.setShow("finish");
    this.setState({
      resumes,
      resume: {
        name: { company: "", work: "" },
        time: {
          startYear: "",
          startMonth: "",
          overYear: "",
          overMonth: "",
        },
        guan: {
          checked: false,
          people: "",
          peopleNum: "",
          des: "",
          month: "",
          year: "",
          passage: "",
          produce: "",
          sales: "",
          method: "",
        },
        more: {
          checked: false,
          more: "",
        },
      },
    });
  }
  cancel() {
    this.setShow("before");
    this.setState({
      resume: {
        name: { company: "", work: "" },
        time: {
          startYear: "",
          startMonth: "",
          overYear: "",
          overMonth: "",
        },
        guan: {
          checked: false,
          people: "",
          peopleNum: "",
          des: "",
          month: "",
          year: "",
          passage: "",
          produce: "",
          sales: "",
          method: "",
        },
        more: {
          checked: false,
          more: "",
        },
      },
    });
  }
  render() {
    const { isShow, resume, resumes } = this.state;
    return (
      <div className="box">
        <div className="resume">
          <div className="res_work">
            <div className="res_tit">
              <b>工作经历</b>
              <div className={`res_warn ${isShow}`}>
                <i
                  onClick={(e) => {
                    e.target.parentNode.style.display = "none";
                  }}
                ></i>
                <span>
                  你有尚未填写销售业绩的工作经历，完善销售业绩可提升应聘成功。
                </span>
              </div>
              <span
                className={`tit_add ${isShow}`}
                onClick={() => {
                  this.setShow("edit");
                }}
              >
                添加
              </span>
            </div>
            <div className={isShow}>
              <div className="res_before">
                <div
                  className="res_beforeLeft"
                  onClick={() => {
                    this.setShow("edit");
                  }}
                ></div>
                <div className="res_beforeRight">
                  <span>针对销售职位定制的工作经历，更加专业</span>
                  <span>可以更加充分的展示你的工作能力</span>
                  <h6
                    onClick={() => {
                      this.setShow("edit");
                    }}
                  >
                    添加工作经历
                  </h6>
                </div>
              </div>

              <div className="res_edit">
                <div className="edit_need">
                  <div>
                    <label className="company">
                      <input
                        type="text"
                        own="name"
                        name="company"
                        value={resume.name.company}
                        placeholder="公司名称"
                        onChange={this.setVal}
                      />
                    </label>
                    <label className="work">
                      <input
                        type="text"
                        name="work"
                        own="name"
                        value={resume.name.work}
                        placeholder="职位名称"
                        onChange={this.setVal}
                      />
                    </label>
                  </div>
                  <div>
                    <label className="year">
                      <select
                        name="startYear"
                        own="time"
                        value={resume.time.startYear}
                        onChange={this.setVal}
                      >
                        <option style={{ display: "none" }}>开始年份</option>
                        <option value="2020年">2020年</option>
                        <option value="2019年">2019年</option>
                        <option value="2018年">2018年</option>
                      </select>
                    </label>
                    <label className="month">
                      <select
                        name="startMonth"
                        own="time"
                        value={resume.time.startMonth}
                        onChange={this.setVal}
                      >
                        <option style={{ display: "none" }}>开始月份</option>
                        <option value="3月">3月</option>
                        <option value="4月">4月</option>
                        <option value="5月">5月</option>
                      </select>
                    </label>
                    <label className="year">
                      <select
                        name="overYear"
                        own="time"
                        value={resume.time.overYear}
                        onChange={this.setVal}
                      >
                        <option style={{ display: "none" }}>结束年份</option>
                        <option value="2021年">2021年</option>
                        <option value="2020年">2020年</option>
                        <option value="2019年">2019年</option>
                      </select>
                    </label>
                    <label className="month overMonth">
                      <select
                        name="overMonth"
                        own="time"
                        value={resume.time.overMonth}
                        onChange={this.setVal}
                      >
                        <option style={{ display: "none" }}>结束月份</option>
                        <option value="3月">3月</option>
                        <option value="4月">4月</option>
                        <option value="5月">5月</option>
                      </select>
                    </label>
                  </div>
                </div>

                <div className="guanli">
                  <label className="guan">
                    <input
                      type="checkbox"
                      own="guan"
                      name="checked"
                      checked={resume.guan.checked}
                      onChange={this.setVal}
                    />
                    <span>管理岗位</span>
                  </label>
                  {resume.guan.checked && (
                    <div className="edit_guan edit_need">
                      <div>
                        <label>
                          <input
                            type="text"
                            placeholder="汇报对象"
                            own="guan"
                            name="people"
                            value={resume.guan.people}
                            onChange={this.setVal}
                          />
                        </label>
                        <label className="work">
                          <input
                            type="text"
                            placeholder="下属人数"
                            own="guan"
                            name="peopleNum"
                            value={resume.guan.peopleNum}
                            onChange={this.setVal}
                          />
                        </label>
                      </div>
                      <div className="textarea">
                        <label>
                          <textarea
                            placeholder="从招聘，培训，团队建设，销售目标等角度描述管理方面的成绩"
                            own="guan"
                            name="des"
                            value={resume.guan.des}
                            onChange={this.setVal}
                          ></textarea>
                        </label>
                      </div>
                    </div>
                  )}
                  <div className="guan_data  edit_need">
                    <span>让数据说话，快来展示你的傲人业绩吧~</span>
                    <div className="data_wan">
                      <label>
                        <input
                          type="text"
                          placeholder="月销售额"
                          own="guan"
                          name="month"
                          value={resume.guan.month}
                          onChange={this.setVal}
                        />
                      </label>
                      <label>
                        <input
                          type="text"
                          placeholder="年销售额"
                          own="guan"
                          name="year"
                          value={resume.guan.year}
                          onChange={this.setVal}
                        />
                      </label>
                      <label>
                        <input
                          type="text"
                          placeholder="目标完成率"
                          own="guan"
                          name="passage"
                          value={resume.guan.passage}
                          onChange={this.setVal}
                        />
                      </label>
                    </div>
                    <div>
                      <label>
                        <input
                          type="text"
                          placeholder="产品"
                          own="guan"
                          name="produce"
                          value={resume.guan.produce}
                          onChange={this.setVal}
                        />
                      </label>
                      <label>
                        <select
                          own="guan"
                          name="sales"
                          value={resume.guan.sales}
                          onChange={this.setVal}
                        >
                          <option style={{ display: "none" }}>销售对象</option>
                          <option value="老年人">老年人</option>
                          <option value="青年">青年</option>
                          <option value="幼童">幼童</option>
                        </select>
                      </label>
                      <label>
                        <input
                          type="text"
                          placeholder="销售方式"
                          own="guan"
                          name="method"
                          value={resume.guan.method}
                          onChange={this.setVal}
                        />
                      </label>
                    </div>
                  </div>
                </div>
                <div className="miaoshu">
                  <label className="guan">
                    <input
                      type="checkbox"
                      own="more"
                      name="checked"
                      checked={resume.more.checked}
                      onChange={this.setVal}
                    />
                    <span>添加更多描述</span>
                  </label>
                  {resume.more.checked && (
                    <div className="miao_more">
                      <textarea
                        own="more"
                        name="more"
                        checked={resume.more.more}
                        onChange={this.setVal}
                      ></textarea>
                    </div>
                  )}
                </div>
                <div className="submit">
                  <input
                    type="button"
                    value="保存"
                    className="sure"
                    onClick={() => {
                      this.sure();
                    }}
                  />
                  <input
                    type="button"
                    value="取消"
                    className="cancel"
                    onClick={() => {
                      this.cancel();
                    }}
                  />
                </div>
              </div>
              <div className="res_finish">
                <ul>{this.lists()}</ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
function mapStateToProps(state) {
  return {
    three: state.yeji,
  };
}
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    getData: (text, data) => dispatch(actions.getData(text, data)),
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(index);
